<template>
  <view class="page">
    <u-form
      class="form"
      :model="form"
      :rules="rules"
      ref="uForm"
      :error-type="errorType"
    >
      <u-form-item
        class="input-item"
        label="原密码"
        label-width="150"
        prop="oldpassword"
      >
        <u-input
          :password-icon="false"
          type="password"
          v-model="form.oldpassword"
          maxlength="16"
          placeholder="请输入原密码"
          input-align="right"
          :clearable="false"
          @input="onKeyInput(form.oldpassword, 1)"
        />
      </u-form-item>
      <u-form-item
        class="input-item"
        label="新密码"
        label-width="150"
        prop="password"
      >
        <u-input
          :password-icon="false"
          type="password"
          v-model="form.password"
          maxlength="16"
          placeholder="请输入新密码"
          input-align="right"
          :clearable="false"
          @input="onKeyInput(form.password, 2)"
        />
      </u-form-item>
      <u-form-item
        class="input-item"
        label="确认密码"
        label-width="150"
        prop="repassword"
      >
        <u-input
          :password-icon="false"
          type="password"
          v-model="form.repassword"
          maxlength="16"
          placeholder="请再次输入新密码"
          input-align="right"
          :clearable="false"
          @input="onKeyInput(form.repassword, 3)"
        />
      </u-form-item>
    </u-form>
    <u-button
      class="resetBtn"
      :ripple="true"
      shape="square"
      type="error"
      @click="resetPwd"
      >确认修改</u-button
    >
    <view class="remind">
      <u-icon name="info-circle" size="32" color="#fb4535"></u-icon>
      <view>
        <text>修改密码时需要输入当前密码;</text>
        <text>密码设置建议同时含有字母和数字;</text>
        <text>建议您定期更换密码,确保账号安全。</text>
      </view>
    </view>
    <u-toast ref="uToast" />
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //错误提示方式 红框
      errorType: ["toast"],

      form: {
        oldpassword: "",
        password: "",
        repassword: "",
      },
      //验证规则
      rules: {
        oldpassword: [
          {
            required: true,
            message: "请输入原密码"
          },
        ],
        password: [
          {
            required: true,
            message: "请输入新密码"
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
            message: "需同时含有字母和数字，长度在6-12之间",
          },
        ],
        repassword: [
          {
            required: true,
            message: "请再次输入新密码",
          },
          {
            validator: (rule, value, callback) => {
              return value === this.form.password;
            },
            message: "两次输入的密码不相等",
          },
        ],
      },
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },

  onLoad() {
  },

  methods: {
    resetPwd: function () {
      // let form = this.form;
      let params = {
        oldPwd: this.form.oldpassword,
        newPwd: this.form.password,
      };
      params = this.$tools.aesEncryptBat(this, params, "oldPwd,newPwd");
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.$u.api.changeUp(params).then((res) => {
            if (res.status == 200) {
              this.$refs.uToast.show({
                title: res.msg,
                type: "primary",
                duration: 1500,
              });
              setTimeout(() => {
                uni.reLaunch({
                  url: "/pages/login/login",
                });
              }, 1500);
            } else {
              this.$refs.uToast.show({
                title: res.msg,
                type: "default ",
              });
            }
          })
		  .catch((res) => {
		  	if (res.errMsg == "request:fail timeout") {
		  		this.$u.toast("请求超时，请重试!");
		  	} else if (res.errMsg == "request:fail") {
		  		this.$u.toast("请求失败，请重试");
		  	} else {
		  		 this.$u.toast("请求失败，请重试");
		  	}
		  	this.$loading(false);
		  	setTimeout(() => {
		  		this.$u.route({
		  			type: "navigateBack",
		  			delta: 1,
		  		});
		  	}, 2000);
		  });
        }
      });
    },

    checkData(value) {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          console.log("不能输入汉字!");
        }
      }
      callback();
    },

    onKeyInput(value, num) {
      if (/[\u4E00-\u9FA5]/g.test(value)) {
        if (num == 1) {
          this.form.oldpassword = null;
        } else if (num == 2) {
          this.form.password = null;
        } else if (num == 3) {
          this.form.repassword = null;
        }
      }
    },
  },
};
</script>

<style lang="scss">
.page {
  position: fixed;
  background-color: #f1f1f1;
  height: 100vh;
  width: 100vw;
}

.form {
  padding-top: 30rpx;
}

.form > .input-item {
  background-color: #fff;
  padding: 10rpx 30rpx;
}

.resetBtn {
  margin: 110rpx 30rpx;
}

.remind {
  padding: 0 30rpx;
  display: flex;
  align-items: flex-start;

  text {
    display: block;
    padding: 0 0 10rpx 14rpx;
    font-size: 26rpx;
    letter-spacing: 4rpx;
    color: #aab8c7;
  }
}
</style>
